<template>
	<view class="row-center py-2-2 border b-active rounded-l" :class="{ 'login-input-disable': disabled }">
		<sl-icon v-if="prefixIcon" :name="prefixIcon" extraClass="color-disable" class='text-hide'/>
		<slot name="prefix" />
		<input
			v-show="!showPwd"
			v-model="value"
			class="flex-1 text-title color-main"
			placeholder-style="color: rgba(36,106,73,0.4)"
			:focus="typeInputFocus"
			:type="type"
			:placeholder="placeholder"
			:disabled="disabled"
			:style="{ marginLeft: prefixIcon ? '16rpx' : 0, marginRight: type === 'password' ? '16rpx' : 0 }"
			:maxlength="maxlength"
			@focus="focus"
			@blur="blur"
			@confirm="confirm"
		/>
		<input
			v-show="showPwd"
			v-model="value"
			type="text"
			class="flex-1 text-title color-main"
			placeholder-style="color: rgba(36,106,73,0.4)"
			:focus="textInputFocus"
			:placeholder="placeholder"
			:disabled="disabled"
			:style="{ marginLeft: prefixIcon ? '16rpx' : 0, marginRight: '16rpx' }"
			:maxlength="maxlength"
			@focus="focus"
			@blur="blur"
			@confirm="confirm"
		/>
		<text
			v-if="type === 'password'"
			v-show="focusPwd || showPwdIcon"
			:class="type === 'password' ? (showPwd ? 'icon-zhengyan' : 'icon-biyan') : ''"
			class="text-xxxxl iconfont color-disable"
			@click="toggleShowPwd"
		></text>
		<text v-if="suffixText" class="text-l color-primary px-2" @click="$emit('clickSuffixText')"> {{ suffixText }} </text>
		<c-link-button v-if="suffixLinkBtn" :openType="suffixLinkBtn.openType" @touch="suffixLinkBtn.handler" :text="suffixLinkBtn.text" />
	</view>
</template>

<script>
import { ref, watch, nextTick, getCurrentInstance } from 'vue';
export default {
	name: 'LoginInput',
	props: {
		prefixIcon: String,
		suffixText: String,
		placeholder: String,
		disabled: Boolean,
		type: {
			default: 'text',
			type: String,
		},
		suffixLinkBtn: Object,
		showPwdIcon: Boolean,
		modelValue: String,
		maxlength: {
			default: 140,
			type: Number,
		}
	},
	setup(props, ctx) {
		const showPwd = ref(false);
		const value = ref('');
		const focusPwd = ref(false);
		const { proxy } = getCurrentInstance();
		const typeInputFocus = ref(false);
		const textInputFocus = ref(false);
		watch(value, (val) => {
			ctx.emit('change', val);
			ctx.emit("update:modelValue", val);
		});
		watch(() => props.modelValue, (v) => {
			value.value = v;
		});
		function toggleShowPwd() {
			showPwd.value = !showPwd.value;
			typeInputFocus.value = false;
			textInputFocus.value = false;
			nextTick(() => {
				if(showPwd.value){
					textInputFocus.value = true;
				}else{
					typeInputFocus.value = true;
				}
			});
		}
		function focus(e) {
			if (props.type === 'password') {
				focusPwd.value = true;
			}
		}
		function blur() {
			if (props.type === 'password') {
				focusPwd.value = false;
			}
		}
		function confirm(){
			ctx.emit("confirm", value.value)
		}
		return {
			showPwd,
			value,
			toggleShowPwd,
			focusPwd,
			setValue(newValue) {
				value.value = newValue;
			},
			focus,
			blur,
			typeInputFocus,
			textInputFocus,
		};
	},
};
</script>

<style lang="scss">
.login-input-disable {
	opacity: 0.5;
}
</style>
